<!-- 店铺价格参数 -->
<script>
import { queryTableComponent } from './pageComponent.js';
import { queryGeneralConfiguration, queryBaseRowData } from './pageOption';
export default {
  name: 'BasicDataMaintenance',
  data() {
    return {
      touchDisplayList: [], // 触摸显示记录
      dataAll: [],
      yearTableConfigList: [], // 年份列表
      monthTableConfigList: [], // 月份列表
      yearList: Array.from({ length: 3 }, (t, i) => ({ label: `第${i + 1}年`, id: `SD0002000${i + 2}` })), // 基础年
      baseRowData: Array.from({ length: 6 }, (t, i) => ({ label: `我是${i}`, type: `SD0021000${i + 1}` })), // 基础行数据
      readOnly: false,
    }
  },
  computed: {
    /**
     * @Description 数据集合
    */
    financialForecastInfos() {
      return this.dataAll.financialForecastInfos
    }
  },
  methods: {
    /**
    * @Description 初始化表格
   */
    initTableOption() {
      this.yearTableConfigList = this.yearList.map(option => {
        let label = option.label;
        let tableOption = queryGeneralConfiguration.call(this, label, option.id);
        return {
          tableData: this.baseRowData,
          tableOption,
          formRefName: option.id,
          readOnly: this.readOnly
        }
      })
    },
    /**
     * @Description 设置年份
     * @param {dateOpenForecast:string} 起始值
     * @param {currentYear:number} 当前第几年
    */
    setYearConfig(dateOpenForecast) {
      let y = Number(dateOpenForecast.split('-')[0]);
      let m = Number(dateOpenForecast.split('-')[1]);
      this.yearTableConfigList.forEach((option, index) => {
        let monthTableOption = [];
        for (let i = 0; i < 12; i++) {
          m += 1;
          if (m > 12) {
            y += 1;
            m = 1;
          }
          monthTableOption.push({
            label: '' + y + (m < 10 ? '0' + m : m),
            width: 150,
            align: 'right',
            renderView(row, { prop }) {
              return 123
            },
          });
        }
        option.tableOption.splice(3, option.tableOption.length, ...monthTableOption);
        option.style.width = '100%'
      })
    },
    /**
     * @Description 校验
     */
    async validate() {
      for (let index = 0; index < this.yearTableConfigList.length; index++) {
        const option = this.yearTableConfigList[index];
        try {
          await this.$refs[option.formRefName].validate();
        } catch (error) {
          this.$message.warning(`请将${this.yearList[index]}中的基础信息/月均费用补全!`)
          return Promise.reject();
        }
      }
    },
  },
  mounted() {
    Vue.directive('focus', {
      inserted: function (el, binding) {
        let { focus } = binding.value;
        focus && el.querySelector('input').focus();
      },
    })
    let res = require('./返回值.json');
    this.dataAll = res.data;
    this.initTableOption();
    // this.setYearConfig('2022-11-24');
    console.log(this.financialForecastInfos);
  },
  render(h) {
    return (
      <div class="custom-collapse-box">
        <span onClick={() => {
          console.log(this.yearTableConfigList);
          console.log(this.financialForecastInfos);
        }}>span</span>
        {this.yearTableConfigList.map(option => (
          <div class="table-box">
            {queryTableComponent.call(this, option)}
          </div>
        ))
        }
      </div>
    );
  }
};
</script>

<style lang="scss" scoped>
.table-box {
  width: 100%;
  margin-bottom: 10px;
  position: relative;
}

.custom-input-box {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/deep/.custom-input-box .el-input__inner {
  border: 0;
  border-bottom: 1px solid #DCDFE6;
  border-radius: 0;
  background: transparent;
  /* padding: 10px 5px !important; */
  text-align: right !important;
}

/deep/.custom-input-box .el-input__inner::-webkit-input-placeholder {
  /* placeholder颜色 */
  color: #aab2bd;
  /* placeholder字体大小 */
  font-size: 12px;
  text-align: left !important;
}
</style>
